<template>
  <!-- <PublicLoading v-if="loading.mounted" /> -->
  <div class="dt-main-tabs-content">
    <div class="dt-content-main">
      <div class="dt-content-head">
        <div class="dt-content-head-tab">
          <span class="dt-head-title">我的审批</span>
          <div class="dt-head-tabs">
            <el-tabs v-model="ActiveName" @tab-click="handleClick">
              <el-tab-pane label="全部" name="0"></el-tab-pane>
              <el-tab-pane label="待处理的" name="1"></el-tab-pane>
              <el-tab-pane label="我发起的" name="2"></el-tab-pane>
              <el-tab-pane label="我处理的" name="3"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <MaComListSearch ref="ListSearch" @searchAudit="searchAudit" @goApproval="goApproval"></MaComListSearch>
      </div>
      <div class="dt-content-page">
        <PublicEmpty v-if="TotalRecord == 0" :ishowImage="true" />
        <MaComListTable
          v-else
          ref="ListTable"
          :AuditList="AuditList"
          :TotalRecord="TotalRecord"
          :TotalPage="TotalPage"
          :Uid="Uid"
          :ActiveName="ActiveName"
          @TurnPage="TurnPage"
        >
        </MaComListTable>
      </div>
    </div>

    <PublicApprovalCard ref="approvalCard" @updataList="updataList" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      ActiveName: this.$tools.getQuery(this).elTab || '0',
      Uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id,
      page: 1,
      AuditList: [],
      TotalRecord: 0,
      TotalPage: 0,
      KeyWords: '',
      RootProjectId: ''
    }
  },
  methods: {
    // goDetail(id) {
    //   this.$router.push('/main/#/project/' + id)
    // },
    handleClick(tab) {
      this.page = 1
      this.KeyWords = ''
      this.resetPage()
      this.getAuditList(this.KeyWords, this.page, this.RootProjectId)
      var data = { elTab: tab.index }
      this.$router.push('/main/#/ma?tab=list&' + this.$qs.stringify(data))
      this.$refs.ListSearch.onHandleClick()
    },
    resetPage() {
      if (this.$refs.ListTable) {
        this.$refs.ListTable.setPage(1)
      }
    },
    // showCard() {
    //   this.dataCard.isShowCard = true
    // },
    getAuditList(KeyWords = '', page = 1, RootProjectId = '') {
      var data = [
          {
            state: this.ActiveName,
            userId: this.Uid,
            keywords: KeyWords,
            page: this.page,
            pageSize: '20',
            rootProjectId: RootProjectId
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/taskAudit/auditList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.AuditList = data.data.items
              this.TotalRecord = data.data.total_record
              this.TotalPage = data.data.total_page
            }
          })
        })
        .catch((error) => {})
    },
    searchAudit(KeyWords, RootProjectId) {
      this.KeyWords = KeyWords
      this.RootProjectId = RootProjectId
      this.getAuditList(KeyWords, this.page, RootProjectId)
    },
    TurnPage(page) {
      this.page = page
      this.getAuditList(this.KeyWords, this.page, this.RootProjectId)
    },
    goApproval() {
      this.$refs.approvalCard.showApproval()
    },
    updataList() {
      this.getAuditList(this.KeyWords, this.page, this.RootProjectId)
    }
  },

  mounted() {
    this.getAuditList(this.KeyWords, this.page, this.RootProjectId)
  }
}
</script>
<style scoped>
.dt-content-page {
  margin: 0;
  background-color: #f2f3f5;
  padding: 16px;
}
.dt-head-tabs >>> .el-tabs__nav {
  transform: translateX(-32px) !important;
}
</style>
